<template>
  <div class="recom-mend">
    <!-- 相同组件推荐区域 -->
    <div class="recommend_s1">
      <div class="rec_left">
        <h2>{{ title }}</h2>
        <div>{{ subject }}</div>
        <a href="">
          <span>查看全部</span>
        </a>
      </div>
      <div class="rec_right" v-if="data">
        <!-- 加逻辑或 同时传递三个值 -->
        <swiper-floor :data="hdata || jdata || fdata" />
      </div>
    </div>
  </div>
</template>

<script>
import SwiperFloor from "./SwiperFloor.vue";
export default {
  components: { SwiperFloor },
  props: ["title", "subject", "hdata", "jdata", "fdata"],
  data() {
    return {
      data: [],
    };
  },
  mounted(){
    // console.log('hdata',props.hdata);
  },
  // updated(){
  //   console.log('hdata',this.hdata);
  //   console.log('jdata',this.jdata);
  //   console.log('fdata',this.hdata);
  // }
};
</script>

<style lang="scss" scoped>
.recom-mend {
  padding: 0 24px;
  margin-bottom: 50px;
}
//推荐样式1
//推荐样式1标题
// 推荐区域左侧简介
.recommend_s1 {
  display: flex;

  .rec_left {
    width: 300px;
    margin-right: 5px;

    h2 {
      margin-bottom: 20px;
    }
    div {
      font-size: 16px;
      font-weight: 400;
      margin-bottom: 8px;
      color: #333;
    }

    a {
      color: #000;
      font-size: 16px;
      font-weight: bold;
    }
  }
  // 推荐区域右侧手动轮播
  .rec_right {
    width: 900px;
  }
}
</style>
